<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>商品拣货</title>
		<script type="text/javascript">
		
   function ajaxPickingCode() {
		$.ajax({
			type : 'post',
			url : '${ctx}/backupTask/ajaxPickingCode',
			data : 'backupTaskCode=${obj.backupTaskCode }',
			dataType : 'json',
			success : function(data) {
				$("#message").show();
				$("#content").html(data.content);
				if(data.status=="1"){
				   $("#number").val("");
				   $("#skuId").val("");
				   $("#skuId").focus();
				}else{
				  setClass("error");
				}
			},

			error : function() {
			    alert("服务器异常");
			}
		});
	}
		
		
	function ajaxPickingSku() {
		var sku = $("#skuId").val();
		sku=sku.trim();
		var number = $("#number").val();
		if (sku == "") {
			$("#message").show();
			$("#content").html("请输入商品编码");
			$("#skuId").focus();
			return;
		}
		$.ajax({
			type : 'post',
			url : '${ctx}/backupTask/ajaxPickingSku',
			data : 'sku=' + sku + '&number=' + number
					+ '&backupTaskCode=${obj.backupTaskCode }',
			dataType : 'json',
			success : function(data) {
				$("#message").show();
				$("#content").html(data.content);
				if(data.status=="1"){
				  setClass("success");
				  var arg0= $("#"+sku+"_1").html();//未拣货商品数量
				  arg0=Number(arg0);
				  var arg1= $("#"+sku+"_2").html();//已拣货商品数量
				  arg1=Number(arg1);
				  number=Number(number);
				   $("#"+sku+"_1").html(arg0-number);
				   $("#"+sku+"_2").html(arg1+number);
				   $("#number").val("");
				   $("#skuId").val("");
				   $("#skuId").focus();
				}else{
				  setClass("error");
				}
			},

			error : function() {
				$("#message").show();
				$("#content").html("请输入数字");
				$("#number").val("");
				$("#number").focus();
			}
		});
	}
	
	function setClass(className){
	  $("#message").removeClass();
	  $("#message").attr("class", "alert alert-"+className);
	}
</script>

	</head>

	<body>
		<div id="message" class="alert alert-success" style="display: none;">
			<span id="content"></span>
		</div>
		<div class="span9">
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th>
							编号
						</th>
						<th>
							生成日期
						</th>
						<th>
							处理日期
						</th>
						<th>
							订单数量
						</th>
						<th>
							商品数量
						</th>
						<th>
							商品种类
						</th>
						<th>
							类别
						</th>
						<th>
							操作人
						</th>
						<th>
							状态
						</th>

					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							${obj.backupTaskCode }
						</td>
						<td>
							${obj.createDate }
						</td>
						<td>
							${obj.updateDate }
						</td>
						<td>
							${obj.ordenoQty }
						</td>
						<td>
							${obj.skuQty }
						</td>
						<td>
							${obj.skuType }
						</td>
						<td>
							<c:if test="${obj.type eq 'single' }">
							     单件
							</c:if>
							<c:if test="${obj.type eq 'multiple' }">
							  多件
							</c:if>
						</td>
						<td>
							${obj.username }
						</td>
						<td>
							<c:if test="${obj.status eq 'finish' }">
							       拣货完成
							</c:if>
							<c:if test="${obj.status eq 'pending' }">
								还未拣货
							</c:if>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div class="span9 alert">
				<div class="input-prepend"><!--
             <span class="add-on"><i class="icon-barcode"></i> 请扫描商品</span>
               <input class="span2" id="skuId" type="text" placeholder="">
               
               <span class="add-on" style='margin-left: 20px;'>输入数量</span>
                <input class="span2" id="number" type="text" placeholder="" >
                <!--  
                 <button type="button" onclick="ajaxPickingSku()" class="btn" style='margin-left: 20px;'>确认拣货</button>
<<<<<<< .working
                 -->
                  <button type="button" onclick="ajaxPickingCode()" class="btn" style='margin-left: 20px;'>一键拣货</button>

               </div>
               
              
		</div>
	
		<div class="span9">
			<table class="table table-striped table-bordered table-condensed">
				<thead >
					<tr>
						
						<th>
							商品sku
						</th>
						<th>
							商品总数量
						</th>
						<th>
							未拣数量
						</th>
						<th>
							已拣数量
						</th>

					</tr>
				</thead>
				<tbody>
					<c:forEach items="${backupTaskSkus }" var="obj">
						<tr>
							<td>${obj.skuId }</td>
							<td>${obj.realQty }</td>
							<td id="${obj.skuId }_1">${obj.realQty -obj.pickQty }</td>
							<td id="${obj.skuId }_2">${obj.pickQty }</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</body>
</html>
